<template>
  <div class="jyzt">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24" style="margin-top: 20px">
        <el-card v-loading="loading" element-loading-text="Loading..." element-loading-background="#178af01a">
          <el-table class="zylbTable" :row-class-name="tableRowClassName" :highlight-current-row="false" :data="tableData" style="width: 100%">
            <el-table-column prop="id" width="60px" label="序号" />
            <el-table-column prop="name" width="80px" label="姓名" />
            <el-table-column prop="xb" width="60px" label="性别" />
            <el-table-column prop="sjh" width="140px" label="电话" />
            <el-table-column prop="dwzw" label="单位/职务" />
            <el-table-column prop="czdz" width="100px" label="常住地址" />
            <el-table-column prop="lx" label="类型" />
          </el-table>
          <el-pagination
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :total="queryParams.total"
            background
            class="pagination"
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import useMapStore from '@/store/modules/map';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $szxcapi = (proxy as any)?.$szxcapi;
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0
});
const loading = ref(false);
const handleCurrentChange = (e) => {
  queryParams.value.pageNum = e;
  init(false);
};
const tableRowClassName = ({ row, rowIndex }: { row; rowIndex: number }) => {
  if (rowIndex % 2 == 0) {
    return 'js-row';
  } else {
    return 'sz-row';
  }
};
const tableData = ref([]);
const init = async (flag) => {
  loading.value = true;
  if (flag) {
    queryParams.value.pageNum = 1;
  }
  const params = {
    'ssc': useMapStore().szxcCountryText,
    ...queryParams.value
  };
  const data = await $szxcapi.xxQuery(params);
  tableData.value = data.rows;
  queryParams.value.total = data.total;
  loading.value = false;
};
onMounted(async () => {
  await nextTick();
  init(true);
});
</script>

<style lang="scss" scoped>
.jyzt {
  width: 100%;
  height: 100%;
  font-family: 'DingTalk';
  overflow: hidden;
  .center-title {
    font-weight: 700;
    font-size: 20px;
    color: white;
    margin-bottom: 14px;
  }
  .el-card {
    max-height: calc(90vh - 200px) !important;
    background: #178af01a;
    border: none;
    overflow: hidden auto;
    .el-pagination {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
    }
  }
  .type {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 200px;
    .typeItem {
      margin: 0px 10px;
      flex: 1;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      // align-items: center;
      border-radius: 5px;
      font-size: 26px;
      .title {
        margin-top: 14px;
        margin-left: 20px;
      }
      .num {
        flex: 1;
      }
    }
    .typeItem:nth-child(1) {
      background: rgb(105, 133, 233);
      .num {
        text-align: center;
        margin-top: 30px;
        color: rgb(245, 154, 35);
      }
    }
    .typeItem:nth-child(2) {
      background: rgb(127, 120, 234);
      .pie.num {
        flex: 1;
        height: 100%;
      }
    }
    .typeItem:nth-child(3) {
      background: rgb(223, 130, 115);
      .num {
        padding: 20px 0 0 0;
        .table {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          color: #fff;
          .label {
            width: 100px;
            text-align: center;
            flex-shrink: 0;
            padding: 0 12px 0px 0px;
          }
          .value {
            padding-left: 10px;
          }
        }
      }
    }
    .typeItem:nth-child(4) {
      background: rgb(98, 125, 233);
      .num {
        color: rgb(112, 182, 3);
      }
    }
    .typeItem:nth-child(5) {
      background: rgb(109, 62, 236);
      .num {
        color: rgb(245, 154, 35);
      }
    }
    .typeItem:nth-child(6) {
      background: rgb(98, 125, 233);
      .num {
        color: rgb(112, 182, 3);
      }
    }
  }
}
.zylbTable,
::v-deep.el-table {
  background-color: transparent;
  thead,
  tr,
  th.el-table__cell {
    font-size: 16px;
    text-align: center;
    color: #fff;
    padding: 0;
    height: 30px;
    background-color: #178af01a !important;
    border: 0px;
  }
  .el-table__body {
    .el-table__cell {
      cursor: pointer !important;
      text-align: center;
      padding: 0;
      border-bottom: 1px solid rgba(188, 227, 255, 0.49);
      border-image: linear-gradient(transparent, rgba(188, 227, 255, 0.9), transparent) 5 5;
    }
  }

  .el-table__body tr:hover > td.el-table__cell {
    background-color: transparent !important;
  }

  .el-table__inner-wrapper:before {
    background-color: transparent !important;
  }
}
</style>
